<script setup lang="ts">

</script>

<template>
  <div class="container mx-auto space-y-8">
    <button class="rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-red-500/50 bg-red-500">
      Subscribe
    </button>
    <button class="rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-orange-500/50 bg-orange-500">
      Subscribe
    </button>
    <button class="rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-yellow-500/50 bg-yellow-500">
      Subscribe
    </button>
    <button class="rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-green-500/50 bg-green-500">
      Subscribe
    </button>
    <button class="rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-cyan-500/50 bg-cyan-500">
      Subscribe
    </button>
    <button class="rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-blue-500/50 bg-blue-500">
      Subscribe
    </button>
    <button class="rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-purple-500/50 bg-purple-500">
      Subscribe
    </button>

    <button class="rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-pink-500/50 bg-pink-500">
      Subscribe
    </button>
    <button class="rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-indigo-500/50 bg-indigo-500">
      Subscribe
    </button>
    <button class="rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-teal-500/50 bg-teal-500">
      Subscribe
    </button>
    <button class="rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-amber-500/50 bg-amber-500">
      Subscribe
    </button>
    <button class="rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-fuchsia-500/50 bg-fuchsia-500">
      Subscribe
    </button>
    <button class="rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-rose-500/50 bg-rose-500">
      Subscribe
    </button>
    <button class="rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-lime-500/50 bg-lime-500">
      Subscribe
    </button>
    <button class="rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-emerald-500/50 bg-emerald-500">
      Subscribe
    </button>
    <button class="rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-sky-500/50 bg-sky-500">
      Subscribe
    </button>
    <button class="rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-violet-500/50 bg-violet-500">
      Subscribe
    </button>
    <button class="rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-gray-500/50 bg-gray-500">
      Subscribe
    </button>
  </div>

  <!-- 不同宽度的按钮 -->
  <div class="container mx-auto space-y-8">
    <button class="w-24 rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-red-500/50 bg-red-500">
      Subscribe
    </button>
    <button class="w-32 rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-orange-500/50 bg-orange-500">
      Subscribe
    </button>
    <button class="w-40 rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-yellow-500/50 bg-yellow-500">
      Subscribe
    </button>
    <button class="w-48 rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-green-500/50 bg-green-500">
      Subscribe
    </button>
    <button class="w-64 rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-cyan-500/50 bg-cyan-500">
      Subscribe
    </button>
    <button class="w-80 rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-blue-500/50 bg-blue-500">
      Subscribe
    </button>
    <button class="w-96 rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-purple-500/50 bg-purple-500">
      Subscribe
    </button>
  </div>

  <!-- 不同高度的按钮 -->
  <div class="container mx-auto space-y-8">
    <button class="h-24 rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-red-500/50 bg-red-500">
      Subscribe
    </button>
    <button class="h-32 rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-orange-500/50 bg-orange-500">
      Subscribe
    </button>
    <button class="h-40 rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-yellow-500/50 bg-yellow-500">
      Subscribe
    </button>
    <button class="h-48 rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-green-500/50 bg-green-500">
      Subscribe
    </button>
    <button class="h-64 rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-cyan-500/50 bg-cyan-500">
      Subscribe
    </button>
    <button class="h-80 rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-blue-500/50 bg-blue-500">
      Subscribe
    </button>
    <button class="h-96 rounded-md px-3 py-2 text-sm font-semibold text-white focus:outline-none shadow-lg shadow-purple-500/50 bg-purple-500">
      Subscribe
    </button>
  </div>

  <div class="container mx-auto space-y-8">
    <!-- 基础按钮 -->
    <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-200">
      主要按钮
    </button>
    <!-- 次级按钮 -->
    <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition duration-200">
      次级按钮
    </button>
    <!-- 危险操作按钮 -->
    <button class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition duration-200">
      危险操作
    </button>
    <!-- 禁用状态按钮 -->
    <button disabled class="px-4 py-2 bg-gray-300 text-gray-500 rounded cursor-not-allowed">
      禁用按钮
    </button>
    <!-- 带图标的按钮 -->
    <button class="flex items-center px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition duration-200">
      <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
      </svg>
      新增项目
    </button>
  </div>
</template>

<style scoped>

</style>